import './Card.less'

export const Card = {
  name: 'Card',
  render () {
    return (
      <div class="card">{this.$slots.default ? this.$slots.default() : null}</div>
    )
  }
}

export const CardHeader = {
  name: 'CardHeader',
  render () {
    return (
      <div class="card--header">{this.$slots.default ? this.$slots.default() : null}</div>
    )
  }
}

export const CardBody = {
  name: 'CardBody',
  render () {
    return (
      <div class="card--body">{this.$slots.default ? this.$slots.default() : null}</div>
    )
  }
}

export const CardFooter = {
  name: 'CardFooter',
  render () {
    return (
      <div class="card--footer">{this.$slots.default ? this.$slots.default() : null}</div>
    )
  }
}

export default {
  install (app, options) {
    app.component(Card.name, Card)
    app.component(CardHeader.name, CardHeader)
    app.component(CardBody.name, CardBody)
    app.component(CardFooter.name, CardFooter)
  }
}
